<template>
  <div class='content-box' style='margin-bottom: 100px;'>
    <p style='text-align: center;padding: 50px 0;font-size: 18px;'>支付信息</p>
    <div class='box'>
      <div>
        <p>订单信息已提交成功，请尽快支付！<span>订单编号: {{ orderId }}</span></p>
        <span>应付金额：{{ money }} 元</span>
      </div>
      <p>请在<span>{{content}}</span>内完成支付，否则订单会被自动取消</p>
    </div>
    <div style='margin:40px 0;'>
      <el-button @click='showBackList=false , flag=1'>个人账户支付</el-button>
      <el-button @click='showBackList=true, flag=2'>公司账户支付</el-button>
    </div>
    <!--银行卡列表-->
    <el-radio-group v-show='showBackList' class='bankBox' v-model="bankRadio">
      <el-radio :label='item.code' v-for='item in bankList' :key='item.code'><img :src="item.url"></el-radio>
    </el-radio-group>

    <div style='display: flex;justify-content: center'>
      <el-button @click='payCost' style='background:#dd253c;color: #fff;width: 20%;' :loading='payBtnLoading'>确认支付</el-button>
    </div>

    <!--支付二维码弹框-->
    <el-dialog
      title="扫码支付"
      :visible.sync="dialogVisible"
      width="30%"
      style='padding: 10px;'>
      <img :src='payImg' style='display: block;margin: 0 auto;width: 300px;height: 300px;'>
    </el-dialog>
  </div>
</template>

<script>
const bankItem=[
  {url:require('../../../assets/bank/0100.png'),code:'0100',disable:false},
  {url:require('../../../assets/bank/0102.png'),code:'0102',disable:false},
  {url:require('../../../assets/bank/0103.png'),code:'0103',disable:false},
  {url:require('../../../assets/bank/0104.png'),code:'0104',disable:false},
  {url:require('../../../assets/bank/0105.png'),code:'0105',disable:false},
  {url:require('../../../assets/bank/0301.png'),code:'0301',disable:false},
  {url:require('../../../assets/bank/0302.jpg'),code:'0302',disable:false},
  {url:require('../../../assets/bank/0303.png'),code:'0303',disable:false},
  {url:require('../../../assets/bank/0304.png'),code:'0304',disable:false},
  {url:require('../../../assets/bank/0305.png'),code:'0305',disable:false},
  {url:require('../../../assets/bank/0307.png'),code:'0307',disable:false},
  {url:require('../../../assets/bank/0308.png'),code:'0308',disable:false},
  {url:require('../../../assets/bank/0309.png'),code:'0309',disable:false},
  {url:require('../../../assets/bank/0310.png'),code:'0310',disable:false},
  {url:require('../../../assets/bank/04012900.png'),code:'04012900',disable:false},
  {url:require('../../../assets/bank/04504520.png'),code:'04504520',disable:false}
]
export default {
  name: 'payInfo',
  data(){
    return{
      dialogVisible:false,     //支付二维码弹框
      payBtnLoading:false,
      bankList:bankItem,
      bankRadio:'',
      selfLoading:false,
      showBackList:false,
      validTime:this.$store.state.orderTime,
      orderId:'',     //订单号
      money:'1',     //应付金额
      payImg:'',           //支付二维码图片
      promiseTimer: '',
      remainTime:300,
      flag:0,
      totalTime : 3600 * 24 * 2,
      content:'3天0小时0分0秒'
    }
  },
  computed:{
  },
  created() {
    this.orderId=this.$route.query.orderId
    this.money=this.$route.query.money
    this.countDown()
  },
  methods:{
    //确认支付
    payCost(){
      if( this. flag === 0){
        return this.$message.error('请先选择支付方式')
      }
      this.payBtnLoading=true
      // this.dialogVisible=true
      if(this.showBackList===true){
        this.payCompany()
      }else {
        this.paySelf()
      }
    },
    //个人账户支付
    paySelf(){
      this.selfLoading=true
      const data={
        "resultType": 2,
        "amount": this.money*100,
        "validTime": 10,
        "businessId": this.orderId,
        "businessNotifyUrl": this.baseURL+'/payments/pay/notify',
        "returnUrl": this.baseURL+'/parkService/success'
      }
      this.$http.post('/pc/remote/pay/cuspay',data).then(res=>{
        console.log(res)
        if(res.data.code===0){
          this.dialogVisible=true
          this.payBtnLoading=false
          this.payImg=res.data.data
        }else {
          this.payBtnLoading=false
          this.$message.error(res.data.msg)
        }
      })
    },
    //公司账户支付
    payCompany(){
      let data={
        "bankCode": this.bankRadio,
        "amount": this.money*100,
        "gatewayType": 1,
        "validTime": 50,
        "businessId": this.orderId,
        "businessNotifyUrl": this.baseURL+'/payments/pay/notify',
        "returnUrl": this.baseURL+'/parkService/success'
      }
      this.$http.post('/pc/remote/pay/gateway',data).then(res=>{
        const {data}=res.data
        console.log(data)
        if(res.data.code===0){
          const div = document.createElement('div');
          div.innerHTML = data;
          document.body.appendChild(div);
          document.getElementById("payForm").submit();
        }else{
          this.$message.error(res.data.msg)
          this.payBtnLoading=false
        }
      })
    },
    //支付倒计时
    countDown() {
      let clock = window.setInterval(() => {
        this.totalTime--;
        const y = Math.floor(this.totalTime/(3600 * 24));
        const m = Math.floor((this.totalTime -  (y * 3600 * 24))/3600);
        const d = Math.floor((this.totalTime -  ((y * 3600 * 24) + (m * 3600))) / 60);
        const s = Math.floor((this.totalTime -  ((y * 3600 * 24) + (m * 3600) + (d * 60))));
        this.content = y + '天' + m + '小时' + d + '分钟' + s + '秒';
      },1000)
      clock;
    },
  }
}
</script>

<style lang='less' scoped>
.vue-qr{
  display: block !important;
  margin: 0 auto;
}
.box{
  border:0.5px solid rgba(228, 228, 228, 1);
  border-radius: 4px;
  padding: 30px;
  color: #828280;
  div{
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    p{
      font-weight: bolder;
      font-size: 20px;
      span{
        color: #828280;
        font-weight: normal;
        font-size: 14px;
      }
    }
    span{
      color: #dd253c;
      font-size: 20px;
    }
  }
  p{
    font-size: 14px;
    span{
      color: #dd253c;
    }
  }
}
.bankBox{
  margin-bottom: 60px;
  display: flex;
  flex-wrap: wrap;
  .el-radio{
    display: flex;
    width: 25%;
    height: 40px;
    padding: 0;
    align-items: center;
    margin: 20px 0;
    img{
      width: 100%;
      height: 100%;
    }
  }
}
</style>